<template>
    <view class="app">
            <SeachNav @search="searchKey"  @openPopup="chooseArea" placeholder="请输入小区名称"></SeachNav>
	<!-- <screen
		ref="screen"
		isCityShow
        :showBottomBtn="false"
		@filterQuery="filterQuery">
	</screen> -->
	<view class="list_wrap">
		<radio-group @change="selItem">
			<view class="item" v-for="(item,index) in list.data" :key="item.dhc_id">
				<view class="left">
					<radio color="#ffd11a" :value="index" :checked="selIndex == index"></radio>
				</view>
				<view class="right">
					<view class="name">{{item.dhc_name}}</view>
					<view class="addr">{{item.dhc_address}}</view>
				</view>
			</view>
		</radio-group>
	</view>
	<view class="bottom_btn">
		<view class="left" @click="addCommunity">
			<view class="add_wrap">
				<view class="iconfont iconicon-test"></view>
				<text class="txt">添加小区</text>
			</view>
		</view>
		<view class="right" @click="save">保存</view>
	</view>
	<mpvue-city-picker :pickerValueDefault="defaultArea" themeColor="#FFD11A"
        ref="mpvueCityPicker" @onConfirm="onConfirm"></mpvue-city-picker>
    </view>
</template>

<script>
import SeachNav from '@/pages/components/SeachNav'
// import screen from '@/components/App_screen'
import { getCommunityList } from '@/api/constructionSite'
import { list } from '@/mixins'
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker'
export default {
	name: 'CommunityList',
	mixins: [list],
	components: {
		// screen,
		SeachNav,
		mpvueCityPicker
	},
	data() {
		return {
			form: {
				district_id: '',
				keyword: null
			},
			selIndex: null,
			community_id: '',
			option: {},
			defaultArea: [0, 0, 1]
		}
	},
	onLoad(option) {
		this.option = option
		this.form.district_id = option.district_id
	},
	onShow() {
		this.resetList()
		this.getList()
	},
	onPullDownRefresh() {
		this.resetList()
		this.getList().then(() => {
			uni.stopPullDownRefresh()
		})
	},
	onReachBottom() {
		if (this.list.finished) {
			uni.showToast({
				title: '没有更多了',
				icon: 'none'
			})
			return
		}
		if (this.list.loading) {
			return
		}
		this.getList()
	},
	methods: {
		getList() {
			const params = {
				id: this.form.district_id,
				page: this.list.page,
				limit: this.list.limit,
				search_name: this.form.keyword
			}
			return getCommunityList(params).then(res => {
				this.completes(res)
				if (this.option.community_id) {
					const index = this.list.data.findIndex(item => item.dhc_id == this.option.community_id)
					if (index > -1) {
						this.selIndex = index
						this.community_id = this.option.community_id
					} else {
						this.selIndex = null
						this.community_id = ''
					}
				}
			})
		},
		selItem(e) {
			this.selIndex = e.detail.value
			this.community_id = this.list.data[e.detail.value].dhc_id
		},
		// filterQuery(filterParams) {
		// 	this.resetList()
		// 	this.form.district_id = filterParams.form.district_id
		// 	this.getList()
		// },
		searchKey(val) {
			this.form.keyword = val
			this.resetList()
			this.getList()
		},
		chooseArea() {
			this.$refs.mpvueCityPicker.show()
		},
		addCommunity() {
			uni.navigateTo({
				url: `/pages/constructionSite/addCommunity`
			})
		},
		onConfirm(pickObj) {
			const codeArr = pickObj.code
			this.form.district_id = codeArr[2]
			this.defaultArea = pickObj.value
			this.resetList()
			this.getList()
		},
		save() {
			if (!this.community_id) {
				uni.showToast({
					title: '请选择小区',
					icon: 'none'
				})
				return
			}
			const community_name = this.list.data.find(item => item.dhc_id == this.community_id).dhc_name
			// const params = {
			// 	...this.option,
			// 	community_id: this.community_id,
			// 	community_name
			// }
			let pages = getCurrentPages()// 获取页面栈
			let prevPage = pages[pages.length - 2]// 上一个页面
			if (prevPage) {
				prevPage.$vm.community_name = community_name
				prevPage.$vm.form.community_id = this.community_id
				uni.navigateBack()
			}
			// uni.navigateTo({
			// 	url: `/pages/constructionSite/add${this.commonJS.queryData(params)}`
			// })
		}
	}
}
</script>

<style scoped lang="scss">
.app {
	min-height: 100vh;
	background-color: #f5f5f5;
}
.list_wrap {
	padding: 30px 30px 100px;
	background-color: #f5f5f5;
	.item {
		border-radius: 20px;
		background-color: #fff;
		padding: 24px 20px 25px;
		display: flex;
		margin-bottom: 20px;
		.left {
			display: flex;
			align-items: center;
		}
		.right {
			padding-left: 20px;
			.name,.addr {
				line-height: 1;
			}
			.name {
				font-size:30px;
				color:rgba(51,51,51,1);
			}
			.addr {
				margin-top: 19px;
				font-size:24px;
				color:rgba(153,153,153,1);
			}
		}
	}
}
.bottom_btn {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100px;
	z-index: 999;
	display: flex;
	.left,.right {
		flex: 1 1 50%;
	}
	.left {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		.add_wrap {
			display: flex;
			align-items: center;
			color: #FF6900;
			.iconicon-test {
				font-size: 38px;
			}
			.txt {
				padding-left: 9px;
				font-size:32px;
			}
		}
	}
	.right {
		background-color: #FFD11A;
		text-align: center;
		line-height: 100px;
		font-size:32px;
		color:rgba(58,27,4,1);
	}
}
</style>
